<template>
  <div class="resume-analyze-container">
    <div class="resume-card">
      <h2>AI简历分析</h2>
      <p class="desc">上传你的简历，AI帮你找不足并推荐职位</p>
      <input type="file" ref="fileInput" @change="handleFileChange" style="display:none" />
      <button class="upload-btn" @click="openUpload">上传简历文件</button>
      <div v-if="loading" class="loading">正在分析，请稍候...</div>
      <div v-if="analysisResult" class="result">
        <h3>分析建议</h3>
        <ul>
          <li v-for="(item, idx) in analysisResult.improvement_suggestions" :key="idx">{{ item }}</li>
        </ul>
        <h3>推荐职位</h3>
        <ul>
          <li v-for="(job, idx) in analysisResult.recommended_positions" :key="idx">{{ job }}</li>
        </ul>
        <h3>推荐公司</h3>
        <ul>
          <li v-for="(company, idx) in analysisResult.recommended_companies" :key="idx">{{ company }}</li>
        </ul>
        <h3>原始分析结果(JSON)</h3>
        <pre style="background:#f8f8f8;padding:12px;border-radius:8px;overflow:auto;max-width:100%;font-size:13px;">{{ analysisResult }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/utils/request'

const analysisResult = ref(null)
const loading = ref(false)

function openUpload() {
  document.querySelector('input[type=file]').click()
}

async function handleFileChange(e) {
  const file = e.target.files[0]
  if (!file) return
  const formData = new FormData()
  formData.append('resume_file', file)
  formData.append('original_filename', file.name)
  loading.value = true
  analysisResult.value = null
  try {
    const res = await request.post('http://127.0.0.1:8000/resume/analysis/', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
    analysisResult.value = res.data
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.resume-analyze-container {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f8fa;
}
.resume-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 48px 36px 36px 36px;
  min-width: 380px;
  text-align: center;
}
h2 {
  color: #00b2b1;
  margin-bottom: 12px;
}
.desc {
  color: #888;
  margin-bottom: 28px;
}
.upload-btn {
  background: #00b2b1;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 36px;
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 24px;
  transition: background 0.2s;
}
.upload-btn:hover {
  background: #009e6d;
}
.loading {
  color: #00b2b1;
  margin: 18px 0;
}
.result {
  margin-top: 24px;
  text-align: left;
}
.result h3 {
  color: #00b2b1;
  margin-bottom: 8px;
}
.result ul {
  padding-left: 20px;
}
</style>